<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>emplist</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/axios.min.js"></script>
		<script type="text/javascript" src="js/const.js"></script>
	</head>
	<body>
		<div id="wrap">
			<div id="top_content">
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20
							<br />
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="#">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						Welcome!
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>
								ID
							</td>
							<td>
								Name
							</td>
							<td>
								Salary
							</td>
							<td>
								Age
							</td>
							<td>
								Operation
							</td>
						</tr>
						<tr class="row1" v-for="User in userList">
							<td>
								{{User.userId}}
							</td>
							<td>
								{{User.name}}
							</td>
							<td>
								{{User.salary}}
							</td>
							<td>
								{{User.age}}
							</td>
							<td>
								<button style="border: none;background-color: #ffffff;cursor: pointer;" v-on:click="delete1(User.name)">delete emp</button>&nbsp;<a v-bind:href="'updateEmp.html?userId='+User.userId">update
									emp</a>
							</td>
						</tr>
					</table>
					<p>
						<input type="button" class="button" value="Add Employee" onclick="location='addEmp.html'" />
					</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var config = {
			el: "#wrap",
			data: {
				userList: []
			},
			methods: {
				findUser: function() {
					debugger;
					//查询商品分类
					var url = serverUrl + "/findAll";
					axios.get(url)
						.then(function(response) {
							// console.log(response);
							// console.log(this);
							var userList = response.data;
							this.vue.userList = userList;
						})
						.catch(function(e) {
							debugger;
							console.log(e);
						});
				},
				delete1: function(name) {
					debugger;
					//查询商品分类
					var url = serverUrl + "/delete?name=" + name;
					window.alert("删除成功");
					axios.get(url)
						.then(function(response) {
							debugger;
							// console.log(response);
							// console.log(this);
							var userList = response.data;
							this.vue.userList = userList;
							location.reload(true);
						})
						.catch(function(e) {
							console.log(e);
						});
				}
			},
			mounted: function() {
				this.findUser();
			}
		}
		var vue = new Vue(config);
	</script>
</html>
